import diff from './diff.js'

h = diff.h
creatEle = diff.creatEle
patch = diff.patch

const container = document.querySelector('#container')

// 初始虚拟节点
const vnode = h('div', {key: 'aaa'}, [
    h('p', {
        id: 'demo',
        class: 'demo',
        style: 'color: red',
        key: '1'
    }, 123),
])

// 挂载
const domObj = creatEle(vnode)
container.appendChild(domObj.elm)

// 变化的虚拟节点
// 同一对象比较
console.groupCollapsed('同一对象比较')
patch(vnode, vnode)
console.groupEnd()

// 不同key
const otherVNode = h('div', {}, [
    h('p', {
        id: 'demo',
        class: 'demo',
        style: 'color: red',
        key: '1'
    }, 123),
])
console.groupCollapsed('不同key')
patch(otherVNode, vnode)
console.groupEnd()

// text变化
let textVNode = h('div', {}, 666)
console.groupCollapsed('text变化')
patch(textVNode, otherVNode)
console.groupEnd()

// 内容变化
let contentVNode = h('div', {}, [
    h('div', { key: 1 }, 1),
    h('div', { key: 2 }, 2),
    h('div', { key: 3 }, 3),
])
console.groupCollapsed('内容变化')
patch(contentVNode, textVNode)
console.groupEnd()

// 子项-增加
let vnode1 = h('div', {}, [
    h('div', { key: 1 }, 1),
    h('div', { key: 2 }, 2),
    h('div', { key: 3 }, 3),
    h('div', { key: 4 }, 4),
])
console.groupCollapsed('子项-增加')
patch(vnode1, contentVNode)
console.groupEnd()

// 子项-删除
let vnode2 = h('div', {}, [
    h('div', { key: 1 }, 1),
    h('div', { key: 2 }, 2),
    h('div', { key: 3 }, 3),
])
console.groupCollapsed('子项-删除')
patch(vnode2, vnode1)
console.groupEnd()

// 子项-新后旧前位置互换
let vnode3 = h('div', {}, [
    h('div', { key: 1 }, 1),
    h('div', { key: 3 }, 3),
    h('div', { key: 2 }, 2),
])
console.groupCollapsed('新后旧前位置互换')
patch(vnode3, vnode2)
console.groupEnd()

// 子项-新前旧后位置互换
let vnode4 = h('div', {}, [
    h('div', { key: 2 }, 2),
    h('div', { key: 3 }, 3),
    h('div', { key: 4 }, 4),
    h('div', { key: 1 }, 1),
])
console.groupCollapsed('新前旧后位置互换')
patch(vnode4, vnode3)
console.groupEnd()

// 子项-均未命中（找到了/未找到）
let vnode5 = h('div', {}, [
    h('div', { key: 4 }, 4),
    h('div', { key: 3 }, 3),
    h('div', { key: 5 }, 5),
])
console.groupCollapsed('均未命中（找到了）')
patch(vnode5, vnode4)
console.groupEnd()
